<template>
  <Title>
    <template v-slot:center>购物车</template>
  </Title>
  <div class="cart-box">
    <div class="cart-body">
      <van-checkbox-group ref="checkboxGroup" v-model="result" @change="groupChange">
        <van-swipe-cell :right-width="50" v-for="(item,index) in list" :key="index">
          <div class="good-item">
            <van-checkbox :name="item.id"/>
            <div class="good-img"><img :src="item.goods.cover_url" alt="" id="myImg"/></div>
            <div class="good-desc">
              <div class="good-title">
                <span>{{item.goods.title}}</span>
                <span>{{item.goods.stock}}</span>
              </div>
              <div class="good-btn">
                <div class="price"><small>￥</small>{{item.goods.price+'.00'}}</div>
                <van-stepper integer :min="1" :max="item.goods.stock" :model-value="item.num"
                             :name="item.id" async-change @change="changeGoodNum"/>
              </div>
            </div>
          </div>
          <template #right>
            <van-button square icon="delete" type="danger" class="delete-button" @click="deleteGood(item.id)"/>
          </template>
        </van-swipe-cell>
      </van-checkbox-group>
    </div>
    <van-submit-bar class="submit-all" :price="total*100" button-text="结算" @submit="onSubmit">
      <van-checkbox v-model:checked="checkAll" @click="allCheck">全选</van-checkbox>
    </van-submit-bar>
    <div class="empty" v-if="!list.length">
      <img src="~assets/images/empty-cart.png" alt="空购物车" class="empty-cart">
      <div class="title">购物车空空如也</div>
      <van-button round color="#1baeae" type="primary" block @click="goTo">前往选购</van-button>
    </div>
  </div>
</template>

<script>
import Title from "@/components/common/title/Title";
import {useRouter,useRoute} from 'vue-router'
import {computed, onMounted, reactive, toRefs} from "vue";
import {Toast} from 'vant'
import {getCart,modifyCart,checkedCart,deleteCartItem} from "../../network/cart";
import {useStore} from 'vuex'
export default {
  components: {Title},
  setup(){
    const router=useRouter();
    const route=useRoute()
    const store=useStore()
    const state=reactive({
      list:[],
      result:[],
      checkAll:false
    })
    onMounted(()=>{
      init()
    })
    //初始化购物车数据
    const init=()=> {
      Toast.loading({message: '加载中', forbidClick: true});
      getCart('include=goods').then(res => {
        state.list = res.data
        state.result=res.data.filter(n=>n.is_checked==1).map(i=>i.id)
        Toast.clear()
      })
    }
    const changeGoodNum=(value,detil)=>{
      Toast.loading({message: '修改中', forbidClick: true});
      modifyCart(detil.name,{num:value}).then(res=>{
        state.list.forEach(item=>{
          if(item.id==detil.name){
            item.num=value
            Toast.clear()
          }
        })
      })
    }
    const allCheck=()=>{
      if(!state.checkAll){
        state.result=state.list.map(i=>i.id)
        state.checkAll=true
      }else {
        state.result=[]
        state.checkAll=false
      }
    }
    //复选框改变处理
    const groupChange=(result)=>{
      if(result.length==state.list.length){
        state.checkAll=true
      }else{
        state.checkAll=false
      }
      console.log(result)
      state.result=result
      //改变数据表中的选中状态
      checkedCart({cart_ids:result})
    }
    //删除商品
    const deleteGood=(id)=>{
      deleteCartItem(id).then(res=>{
        init()
        store.dispatch('updateCart')
      })
    }
    const goTo=()=>{
      router.push({path:'/home'})
    }
    //通过计算属性，计算总价
    const total=computed(()=>{
      let sum=0;
      state.list.filter(item=>state.result.includes(item.id))
        .forEach(item=>{
          sum+=parseInt(item.num)*parseFloat(item.goods.price)
        })
      return sum
    })
    const onSubmit=()=>{
      if(state.result.length==0){
        Toast.fail("请选择商品进行结算")
      }else {
        router.push({path:'/createorder'})
      }
    }
    return { ...toRefs(state),goTo,init,changeGoodNum,groupChange,allCheck,deleteGood,total,onSubmit}
  }
}
</script>

<style scoped lang="scss">

.cart-box {
  .cart-body {
    margin: 60px 0 100px 0;
    padding-left: 10px;

    .good-item {
      display: flex;

      .good-img {
        #myImg {
          width: 100px;
          height: auto;
        }
      }

      .good-desc {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        flex: 1;
        padding: 20px;


        .good-title {
          display: flex;
          justify-content: space-between;
        }

        .good-btn {
          display: flex;
          justify-content: space-between;

          .price {
            font-size: 16px;
            color: red;
            line-height: 28px;

          }

          .van-icon-delete {
            font-size: 20px;
            margin-top: 4px;
          }
        }
      }
    }

    .delete-button {
      width: 50px;
      height: 100%;
    }
  }

  .empty {
    width: 50%;
    margin: 0 auto;
    text-align: center;
    margin-top: 200px;

    .empty-cart {
      width: 150%;
      margin-bottom: 20px;
    }

    .van-icon-smile-o {
      font-size: 50px;
    }

    .title {
      font-size: 16px;
      margin-bottom: 20px;
    }
  }

  .submit-all {
    margin-bottom: 52px;

    .van-checkbox {
      margin-left: 0px;
    }

    .van-submit-bar__text {
      margin-left: 10px;
    }

    .van-submit-bar__button {
      background: red;
    }
  }


}
</style>
